---
type: tutorial
title: Создайте подвал для социальных сетей
description: |-
  Руководство: Создайте свой первый блог на Astro —
  Создайте новый компонент с нуля, а затем добавьте его на ваши страницы
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - Создать компонент Footer
  - Создать и передать пропсы компоненту Social Media
</PreCheck>

Теперь, когда вы использовали компоненты Astro на странице, пришло время использовать компонент внутри другого компонента!

## Создание компонента Footer

<Steps>
1. Создайте новый файл `src/components/Footer.astro`.

2. Скопируйте следующий код в ваш новый файл `Footer.astro`.

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>Узнайте больше о моих проектах на <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>
    ```
</Steps>

### Импорт и использование `Footer.astro`

<Steps>
1. Добавьте следующий оператор импорта в метаданные каждой из трех ваших страниц Astro (`index.astro`, `about.astro` и `blog.astro`):

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. Добавьте новый компонент `<Footer />` в ваш шаблон Astro на каждой странице, непосредственно перед закрывающим тегом `</body>`, чтобы отобразить подвал в нижней части страницы.

    ```astro ins={1}
        <Footer />
      </body>
    </html>
    ```

3. В предварительном просмотре браузера проверьте, что на каждой странице виден новый текст подвала.
</Steps>

<Box icon="puzzle-piece">

## Попробуйте сделать это сами — Настройте ваш подвал

Настройте подвал для отображения нескольких социальных сетей (например, Instagram, Twitter, LinkedIn) и укажите свое имя пользователя для прямой ссылки на ваш профиль.

</Box>

### Проверка кода
Если вы следовали каждому шагу в руководстве, ваш файл `index.astro` должен выглядеть следующим образом:

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = 'Главная';
---

<html lang="ru">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
    <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>
```

## Создание компонента социальных сетей

Поскольку у вас может быть несколько онлайн-аккаунтов, на которые можно ссылаться, вы можете создать один повторно используемый компонент и отображать его несколько раз. Каждый раз вы будете передавать ему различные свойства (`props`) для использования: онлайн-платформу и ваше имя пользователя там.

<Steps>
1. Создайте новый файл `src/components/Social.astro`.

2. Скопируйте следующий код в ваш новый файл `Social.astro`.

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```
</Steps>

### Импорт и использование `Social.astro` в вашем подвале

<Steps>
1. Измените код в `src/components/Footer.astro`, чтобы импортировать, а затем использовать этот новый компонент три раза, каждый раз передавая различные **атрибуты компонента** в качестве свойств:

    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>Узнайте больше о моих проектах на <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. Проверьте предварительный просмотр в браузере, и вы должны увидеть, что ваш новый подвал отображает ссылки на эти три платформы на каждой странице.
</Steps>

## Стилизация вашего компонента социальных сетей

<Steps>
1. Настройте внешний вид ваших ссылок, добавив тег `<style>` в `src/components/Social.astro`.

    ```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. Добавьте тег `<style>` в `src/components/Footer.astro, чтобы улучшить макет его содержимого.

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

3. Снова проверьте предварительный просмотр в браузере и убедитесь, что на каждой странице отображается обновлённый подвал.
</Steps>

<Box icon="question-mark">

### Проверьте себя

1. Какую строку кода нужно написать в блоке метаданных компонента Astro, чтобы получить значения `title`, `author` и `date` в качестве пропсов?

    <MultipleChoice>
      <Option isCorrect>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from './components/BlogPost.astro`
      </Option>
      <Option>
        `<BlogPost title="Мой первый пост" author="Дэн" date="12 августа 2022" />`
      </Option>
    </MultipleChoice>

2. Как **передать значения в виде пропсов** компоненту Astro?

    <MultipleChoice>
      <Option>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from './components/BlogPost.astro`
      </Option>
      <Option isCorrect>
        `<BlogPost title="Мой первый пост" author="Дэн" date="12 августа 2022" />`
      </Option>
    </MultipleChoice>

</Box>

<Box icon="check-list">

## Контрольный список

<Checklist>
- [ ] Я умею создавать новые компоненты `.astro` в `src/components/`.
- [ ] Я умею импортировать и использовать компоненты Astro внутри других компонентов Astro.
- [ ] Я умею передавать пропсы компоненту Astro.
</Checklist>

</Box>

### Ресурсы

- [Пропсы компонентов в Astro](/ru/basics/astro-components/#пропсы-компонента)
